<template>
  <div>
    <router-link  class="film-item" :to='"/detail/"+data.filmId'>
      <img :src="data.poster" alt="">
      <div class="content">
        <h4>{{data.name}}</h4>
        <p v-if='type==="nowplaying"'>观众评分: {{data.grade}}</p>
        <p>主演：{{ data.actors | filterActors }}</p>
        <p v-if='type==="comingsoon"'>上映日期: {{data.premiereAt | filterDate}}</p>
        <p v-else>{{data.nation}} | {{data.runtime}}分钟</p>
      </div>
    </router-link>
  </div>
</template>

<script>

export default {
  props: {
    data: {
      type: Object
    },
    type: {
      type: String
    }
  }
}
</script>

<style lang='scss' scoped>
  .film-item{
    display: flex;
    padding:.15rem .15rem .15rem 0;
    .content{
      padding-left:.2rem;
      p{
        width:2.5rem;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }
    }
    img{
      width:.66rem;
      height:1.05rem;
    }
  }
</style>
